<template>
    <transition
        name="modal"
        tag="div"
    >
        <div
            class="modal_box"
            v-show="visible"
        >
            <div
                class="modal_dialog"
                style="width:480px"
            >
                <div class="modal_content">
                    <!--头部-->
                    <div class="modal_header">
                        <slot name="header">
                            <h3 class="title">{{modal.title}}</h3>
                        </slot>
                        <a
                            @click="close(0)"
                            class="iconfont icon-close"
                            href="javascript:void(0)"
                        ></a>
                    </div>
                    <!--内容区域-->
                    <div class="modal_body">
                        <slot
                            name="body"
                            class="body_content"
                        >
                        </slot>
                    </div>
                    <!--尾部,操作按钮-->
                    <div class="modal_footer">
                        <slot name="footer">
                            <slot name="button">
                                <a
                                    v-if="modal.showCancelButton"
                                    href="javascript:void(0)"
                                    class="button"
                                    :class="modal.cancelButtonClass"
                                    @click="close(1)"
                                >{{modal.cancelButtonText}}</a>
                                <a
                                    v-if="modal.showConfirmButton"
                                    href="javascript:void(0)"
                                    class="button"
                                    :class="modal.confirmButtonClass"
                                    @click="submit"
                                >{{modal.confirmButtonText}}</a>
                            </slot>
                        </slot>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
/* eslint-disable */
/**
 * modal 模态接口参数
 * @param {string} modal.title 模态框标题
 * @param {string} modal.text 模态框内容
 * @param {boolean} modal.showCancelButton 是否显示取消按钮
 * @param {string} modal.cancelButtonClass 取消按钮样式
 * @param {string} modal.cancelButtonText 取消按钮文字
 * @param {string} modal.showConfirmButton 是否显示确定按钮
 * @param {string} modal.confirmButtonClass 确定按钮样式
 * @param {string} modal.confirmButtonText 确定按钮标文字
 */
export default {
    props: {
        visible: { type: Boolean, default: false },
        options: {
            type: Object,
            default: {}
        }
    },
    components: {

    },
    data () {
        return {
            show: false, // 是否显示模态框
            resolve: '',
            reject: '',
            promise: '' // 保存promise对象
        }
    },
    computed: {
        /**
         * 格式化props进来的参数,对参数赋予默认值
         */
        modal () {
            let modal = this.options
            if (modal) {
                modal = {
                    title: modal.title || '提示',
                    showCancelButton: typeof modal.showCancelButton == 'undefined' ? true : modal.showCancelButton,
                    cancelButtonClass: modal.cancelButtonClass ? modal.showCancelButton : 'btn-default',
                    cancelButtonText: modal.cancelButtonText ? modal.cancelButtonText : '取消',
                    showConfirmButton: typeof modal.showConfirmButton == 'undefined' ? true : modal.cancelButtonClass,
                    confirmButtonClass: modal.confirmButtonClass ? modal.confirmButtonClass : 'btn-active',
                    confirmButtonText: modal.confirmButtonText ? modal.confirmButtonText : '确定',
                }
            } else { // 使用时没有传递参数
                modal = {
                    title: '提示',
                    showCancelButton: true,
                    cancelButtonClass: 'btn-default',
                    cancelButtonText: '取消',
                    showConfirmButton: true,
                    confirmButtonClass: 'btn-active',
                    confirmButtonText: '确定',
                }
            }
            return modal
        }
    },
    methods: {
        submit () {
            this.$emit('Confirm', false)
        },
        close (val) {
            this.$emit('Cancel', false)
        }
    }
}
</script>
<style lang="less" scoped>
    .modal-enter-active {
        animation: modal-in 0.35s linear;
    }

    .modal-leave-active {
        animation: modal-in 0.35s reverse linear;
    }

    @keyframes modal-in {
        0% {
            transform: translateY(-20px) rotateX(-35deg);
            opacity: 0;
        }
        50% {
            opacity: 0.5;
        }
        100% {
            transform: translateY(0) rotateX(0);
            opacity: 1;
        }
    }
    .modal_box {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1001;
        outline: 0;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.5);
    }
    .modal_dialog {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 6px;
        background: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        z-index: 1002;
        .modal_content {
            box-sizing: border-box;
            .modal_body {
                padding: 16px;
                font-size: 14px;
                line-height: 1.5;
                color: #666;
            }
            .modal_header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 14px 16px;
                border-bottom: 1px solid #eee;
                .title {
                    line-height: 20px;
                    font-size: 14px;
                    color: #464c5b;
                    font-weight: 700;
                }
                a {
                    color: #999;
                    &:hover {
                        color: #666;
                    }
                }
            }
            .modal_footer {
                text-align: right;
                padding: 12px 18px;
                border-top: 1px solid #eee;
                a {
                    display: inline-block;
                    color: #fff;
                    padding: 2% 5%;
                    border-radius: 5px;
                    &:first-of-type {
                        border: 1px solid #dcdfe6;
                        color: #666;
                        margin-right: 15px;
                        &:hover {
                            color: #39f;
                            border-color: #39f;
                        }
                    }
                    &:last-of-type {
                        color: #fff;
                        background-color: #39f;
                        border-color: #39f;
                        &:hover {
                            background-color: #5cadff;
                            border-color: #5cadff;
                        }
                    }
                }
            }
        }
    }
</style>
